<template>
  <view class="wxjj-wrapper">
    <view class="main-pd">
      <view class="sylc" @click="$u.route('/pagesB/wxjj/sylc')">
        <u-image
          radius="12rpx"
          src="@/static/images/xqbg.png"
          width="668rpx"
          height="124rpx"></u-image>
        <view class="u-flex u-flex-between title">
          <view class="color-fff font-32 fw-600"> 维修基金使用流程 </view>
          <view>
            <u-image
              src="@/static/images/icon11.png"
              width="40rpx"
              height="40rpx"></u-image>
          </view>
        </view>
      </view>
      <HeadTitle title="维修基金使用情况">
        <view @click="goUrl('/pagesB/wxjj/wxjjList')"
          ><u-text
            suffixIcon="arrow-right"
            color="#bfbfbf"
            text="查看更多"
            :iconStyle="{
              fontSize: '28rpx',
              color: '#bfbfbf',
            }"></u-text
        ></view>
      </HeadTitle>
      <view class="u-m-t-20 u-card" v-if="wxjjList.length">
        <view
          class="wxjj-item"
          v-for="item in wxjjList"
          :key="item.id"
          @click="$u.route('/pagesB/wxjj/wxjjDetail', { id: item.id })">
          <view class="u-line-1 font-32 color-000 fw-200">{{
            item.content
          }}</view>
          <view class="u-flex u-flex-between u-m-t-16">
            <view class="font-32 fw-600 color-f34b47"
              >￥{{ item.cost }}万元</view
            >
            <view class="font-28 color-8c8c8c">{{ item.wxTime }}</view>
          </view>
        </view>
      </view>
      <HeadTitle title="参与表决">
        <view @click="goUrl('/pagesB/wxjj/bjList')"
          ><u-text
            suffixIcon="arrow-right"
            color="#bfbfbf"
            text="查看更多"
            :iconStyle="{
              fontSize: '28rpx',
              color: '#bfbfbf',
            }"></u-text
        ></view>
      </HeadTitle>
      <view class="u-card" v-if="wxList.length">
        <view class="wxjj-item" v-for="item in wxList" :key="item.id">
          <view class="color-000 font-32 u-line-1">{{ item.title }}</view>
          <view class="u-flex u-flex-between u-m-t-24">
            <view :class="[wxClass(item.state), 'status']">{{
              wxStatus(item.state)
            }}</view>
            <view
              class="color-f34b47 font-28"
              @click="$u.route('/pagesB/wxjj/cybj', { id: item.id })"
              >参与表决 ></view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import HeadTitle from "@/components/HeadTitle";
import { getwxjjListApi, getsyjlListApi } from "@/api/index";
import { onLoad } from "@dcloudio/uni-app";
import useInfoStore from "@/store/user";
const userStore = useInfoStore();
let wxjjList = ref([]);
// 维修状态判断
const wxStatus = computed((status) => {
  return function (status) {
    let statusArr = ["未开始", "进行中", "已结束"];
    return statusArr[status];
  };
});
const wxClass = computed((status) => {
  return function (status) {
    return "status" + status;
  };
});
let wxList = ref([]);
const goUrl = (url) => {
  uni.$u.route(url);
};
// 获取维修基金使用记录列表
const getsyjlListHandle = () => {
  getsyjlListApi({
    page: 1,
    limit: 3,
    deptId: userStore.deptId,
  }).then((res) => {
    if (res.success) {
      wxjjList.value = res.data;
    }
  });
};
// 获取维修基金表决
const getwxjj = () => {
  getwxjjListApi({
    page: 1,
    limit: 3,
    deptId: userStore.deptId,
    dzyzkId: userStore.dzyzkId,
  }).then((res) => {
    if (res.success) {
      wxList.value = res.data;
    }
  });
};
onLoad(() => {
  getsyjlListHandle();
  getwxjj();
});
</script>

<style lang="scss" scoped>
.wxjj-wrapper {
  padding-top: 28rpx;

  .sylc {
    position: relative;
    margin-bottom: 48rpx;

    .title {
      width: 668rpx;
      position: absolute;
      top: 38rpx;
      box-sizing: border-box;
      padding: 0 32rpx;
    }
  }

  .wxjj-item {
    border-bottom: 1rpx solid #e6e6e6;
    padding: 28rpx 0;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      border: none;
      padding-bottom: 0;
    }
  }

  .status {
    width: 132rpx;
    height: 40rpx;
    border-radius: 6rpx;
    font-size: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .status0 {
    background-color: #f0f0f0;
    color: #595959;
  }

  .status1 {
    background-color: #edf9e8;
    color: #52c41a;
  }

  .status2 {
    background-color: #ffedee;
    color: #ff4d4f;
  }
}
</style>
